
import React, { useEffect, useState } from 'react'
import { Space, Button, Toast, List, Tag, NavBar, Avatar, Card, Steps } from 'antd-mobile'
import {
  FireFill, CheckCircleFill,
  ClockCircleFill,
  HandPayCircleOutline, RightOutline
} from 'antd-mobile-icons'

import React from 'react'
import { Space,  Toast,List,Tag,NavBar,Avatar, } from 'antd-mobile'
import { FireFill,EditSFill } from 'antd-mobile-icons'
import '../css/overview.css'
import dayjs from 'dayjs';
import { useNavigate } from 'react-router-dom'
import { Audio } from '@nutui/nutui-react'
import axios from 'axios'
import ChildComponent from './childComponent'
const { Step } = Steps
function Overview() {
  let navigate = useNavigate()
  const [basicFact, setBasicFact] = useState({
    head: 'http://127.0.0.1:3000/upload/4JSNcp8RyefuBoro6L39mfbC.png',
    name: '醋溜',
    sex: '男',
    phone: '18630078370',
    birthday: '2004-09-03',
    education: '学历',
    workTime: '工作经验',
    status: '求职状态',
    desc: '我的优势',

  })
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    let id = localStorage.getItem('id');
    axios.get('http://127.0.0.1:3000/mebasic?id=' + id).then(res => {
      let data = res.data;
      console.log(data.data);
      localStorage.setItem('basicFact', JSON.stringify(data.data));
      setBasicFact(data.data);
      setIsLoading(false);


    }).catch(() => {
      setIsLoading(false);  // 即使请求失败也取消加载状态
    });
  }, []);
  const goBasicFact = () => {
    Toast.show({
      icon: 'loading',
      content: '加载中...',
      duration: 1000,
    })
    localStorage.setItem('basicFact', JSON.stringify(basicFact))
    navigate('/overviewUpdate')
    const back = () =>{
        Toast.show({
            icon: 'loading',
            content: '加载中...',
            duration: 1000,
        })
    }
    return 
  }
  const right = (
    <div>
      <Space onClick={()=>{navigate('/preview')}}>
        预览
      </Space>
    </div>
  )

  const back = () => {
    Toast.show({
      icon: 'loading',
      content: '加载中...',
      duration: 1000,
    })
  }
  return (
    <>
      {isLoading ? (
        <div>加载中...</div>
      ) : (
        <div style={{ backgroundColor: '#eee', height: '110%' }}>

          <div className='top'>
            <NavBar right={right} onBack={back}>
              简历
            </NavBar>
          </div>
          {/* 求职意向 */}
          <Card
            title={
              <>
                <FireFill color='orange' />
                求职意向
              </>
            }
            extra={<span>{basicFact.status}<RightOutline /></span>}
            style={{ lineHeight: '50px', borderRadius: '16px', margin: '10px auto', width: '80%' }}
            onHeaderClick={() => goBasicFact()}
          >
          </Card>
          {/* 基本信息 */}
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                基本信息
                <Tag round color='orange' fill='outline'>
                  必填
                </Tag>
              </div>
            }
            extra={<span>去完善<RightOutline /></span>}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            onHeaderClick={() => goBasicFact()}
          >
            <div style={{ display: 'flex' }}>
              <Avatar src={basicFact.head} style={{ borderRadius: '50%', marginRight: '10px' }} />
              <div>
                <List.Item
                  description={basicFact.phone}
                >
                  {basicFact.name}
                </List.Item>
              </div>

            </div>
          </Card>
          {/* 音频 */}
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                我有话对hr说
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            onHeaderClick={() => { navigate('/audio') }}
          >
            <div style={{ textAlign: 'center' }}>
              <Audio
                autoPlay={false}
                src={basicFact.url}
                type="controls"
                preload="auto"
                muted={false}
                onPause={(e) => {
                  console.log('paused', e)
                }}
                onEnd={() => alert('ended!')}
              />
            </div>
          </Card>
          {/* 自我介绍 */}
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                自我介绍
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            onHeaderClick={() => { navigate('/introduction') }}
          >
            <div style={{ textAlign: 'center' }}>
              {basicFact.introduction ?
                (
                  <>{
                    basicFact.introduction
                  }</>
                ) :
                <ChildComponent>增加自我介绍</ChildComponent>
              }
            </div>
          </Card>
          {/* 工作经历 */}
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                工作经历
                <Tag round color='orange' fill='outline'>
                  必填
                </Tag>
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            onHeaderClick={() => { navigate('/WorkExp') }}
          >
            <div>
              {basicFact.work?
                (
                  <div>
                    <Steps
                      direction='vertical'
                      current={1}
                      style={{
                        '--title-font-size': '17px',
                        '--description-font-size': '15px',
                        '--indicator-margin-right': '12px',
                        '--icon-size': '22px',
                      }}
                    >
                      <Step
                        title={
                          <Space block direction='vertical'>
                            <div>
                              {dayjs(basicFact.work.work_start).format('YYYY-MM-DD')}

                              至
                              {dayjs(basicFact.work.work_end).format('YYYY-MM-DD')}

                            </div>
                            <div>{basicFact.work.work_name}</div>
                          </Space>
                        }
                        description={
                          <Space block direction='vertical'>
                            <div>{basicFact.work.work_cate}</div>
                            <div>{basicFact.work.work_content}</div>
                          </Space>
                        }
                        icon={<CheckCircleFill />}
                      />
                      <Step />
                    </Steps>
                  </div>
                ) :
                <ChildComponent>增加工作经历</ChildComponent>
              }
            </div>
          </Card>
          {/* 学习经历 */}
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                学习经历
                <Tag round color='orange' fill='outline'>
                  必填
                </Tag>
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            onHeaderClick={() => { navigate('/studyExp') }}
          >
            <div>
              {basicFact.study ?
                (
                  <div>
                    <Steps
                      direction='vertical'
                      current={1}
                      style={{
                        '--title-font-size': '17px',
                        '--description-font-size': '15px',
                        '--indicator-margin-right': '12px',
                        '--icon-size': '22px',
                      }}
                    >
                      <Step
                        title={
                          <Space block direction='vertical'>
                            <div>
                              毕业时间：
                              {dayjs(basicFact.study.study_end).format('YYYY-MM-DD')}

                            </div>
                            <div>{basicFact.study.study_name}</div>
                          </Space>
                        }
                        description={
                          <Space block direction='vertical'>
                            <div>{basicFact.study.study_content}</div>
                          </Space>
                        }
                        icon={<CheckCircleFill />}
                      />
                      <Step />
                    </Steps>
                  </div>
                ) :
                <ChildComponent>增加学习经历</ChildComponent>
              }
            </div>
          </Card>
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                学习经历
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            
          >
            <div style={{textAlign:'center'}}>
              
                <ChildComponent>增加学习经历</ChildComponent>
              
            </div>
          </Card>
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                学习经历
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            
          >
            <div style={{textAlign:'center'}}>
              
                <ChildComponent>增加学习经历</ChildComponent>
              
            </div>
          </Card>
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                学习经历
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            
          >
            <div style={{textAlign:'center'}}>
              
                <ChildComponent>增加学习经历</ChildComponent>
              
            </div>
          </Card>
          <Card
            title={
              <div style={{ fontWeight: 'normal' }}>
                学习经历
              </div>
            }
            extra={<RightOutline />}
            style={{ borderRadius: '16px', margin: '10px auto', width: '80%' }}
            
          >
            <div style={{textAlign:'center'}}>
              
                <ChildComponent>增加学习经历</ChildComponent>
              
            </div>
          </Card>
        </div>
      )}
    </>
  )
}

export default Overview
